<template>
  <div class="box">
    <div class="main-re">
      <div class="main-left">
        <HeaderCommon :HotPlaylist="HotPlaylist"></HeaderCommon>
        <div class="songList" v-if="HotPlaylist.tracks">
          <div class="tlt">
            <h3>歌曲列表</h3>
            <span class="sub">{{ HotPlaylist.trackCount }}首歌</span>
            <div class="out-list">
              <i class="u-icn"></i>
              <a href="#">生成外链播放器</a>
            </div>

            <div class="more">
              播放：<span class="fc">{{ HotPlaylist.playCount }}</span>次
            </div>
          </div>
          <table class="m-table">
            <thead>
            <tr style="border-bottom: 2px solid #D8D8D8">
              <th style="width: 12%;">
              </th>
              <th style="width: 37%;">
                <div>歌曲标题</div>
              </th>
              <th style="width: 17%;">
                <div>时长</div>
              </th>
              <th style="width: 14%;">
                <div>歌手</div>
              </th>
              <th style="width: 20%;">
                <div>专辑</div>
              </th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in HotPlaylist.tracks" :key="index">
              <td class="filst">
                <div class="hd">
                  <span class="num-hd">{{ index + 1 }}</span>
                  <span class="bg-img" @click="sendUrl(item)"></span>
                </div>
              </td>
              <td class="rank">
                <div class="f-cb">
                  <router-link :to="{name:'SongDetail',params:{id:item.id}}">
                    {{ item.name }}
                  </router-link>
                  <span class="mv" title="播放mv" v-if="item.mv" @click="toMv(item.mv)"></span>
                </div>
              </td>
              <td class="s-fc3">
                <span class="u-dur">{{ voiceDuration(item.dt) }}</span>
                <div class="oper">
                  <a href="javascript:;" title="添加到播放列表" @click.prevent="addSongList(item)"></a>
                  <span class=" s-bg-11" title="收藏">收藏</span>
                  <span class=" u-icn-81" title="分享">分享</span>
                  <span class=" s-bg-12" title="下载">下载</span>
                </div>
              </td>
              <td class="singer">
      <span class="text" v-if="item.ar">
        <router-link :to="{name:'Work',params:{id:item.ar[0].id}}" >{{ item.ar[0].name }}</router-link>
      </span>
              </td>
              <td class="singer">
      <span class="album">
        <router-link :to="{name:'AlbumDetail',params:{id:item.al.id}}">{{ item.al.name }}</router-link>
      </span>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
        <div style="height: 20px;"></div>
        <Comment :commentId="commentId"></Comment>
      </div>
      <div class="main-right">
        <div class="g-wrap7">
          <h3 class="u-hd3" v-if="HotPlaylist.subscribers===false">喜欢这个歌单的人</h3>
          <ul class="m-piclist" v-if="HotPlaylist.subscribers===false">
            <li v-for="(item,index) in HotPlaylist.subscribers" :key="index" >
              <router-link :to="{name:'UserDetail',params:{id:item.userId}}" :title="item.nickname">
                <img v-lazy="item.avatarUrl" alt="" >
              </router-link>
            </li>
          </ul>
          <h3 class="u-hd4">热门歌单</h3>
          <ul class="m-rctlist" v-if="playList">
            <li v-for="(item,index) in playList.slice(0,5)" :key="index">
              <div class="cver">
                <img :src="item.coverImgUrl" alt="">
                <router-link :to="{name: 'RecommendDetail', params: {id: item.id}}" class="cver-a"
                             :title="item.name"></router-link>
              </div>
              <div class="info">
                <p class="cver-title">
                  <router-link :to="{name: 'RecommendDetail', params: {id: item.id}}" :title="item.name">
                    {{ item.name }}
                  </router-link>
                </p>
                <p class="cver-name">
                  <span style="color: #999;">by</span>
                  <router-link :to="{name: 'UserDetail', params: {id: item.creator.userId}}" class="cver-name-a">{{ item.creator.nickname }}</router-link>
                  <img
                      :src="item.creator.avatarDetail.identityIconUrl"
                      alt="" v-if="item.creator.avatarDetail">
                </p>
              </div>
            </li>
          </ul>
          <h3 class="u-hd5">网易云音乐多端下载</h3>
          <ul class="m-multi">
            <li>
              <a href="#">
                iPhone
              </a>
            </li>
            <li>
              <a href="#">PC</a>
            </li>
            <li>
              <a href="#">Android</a>
            </li>
          </ul>
          <p class="mu-p">同步歌单，随时畅听320k好音乐</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import SubNav from "@/components/SubNav";
import Comment from "@/components/Comment";
import HeaderCommon from "@/components/HeaderCommon";
import {voiceDuration} from "@/utils/voiceDuration";
import {mapState} from "vuex";

export default {
  name: 'index',

  components: {
    Header, Footer, SubNav, HeaderCommon, Comment
  },
  data() {
    return {
      voiceDuration: voiceDuration,
      commentId:''
    }
  },
  methods:{
    toMv(id){
      this.$router.push({name:'MvDetail',query:{id:id}})
    },
    addSongList(i){
      this.$store.commit('track/ADDMUSICLIST',i)
    },
    sendUrl(i){
      this.$store.commit('track/SETMUSIC',i)
    }
  },
  mounted() {
    this.$store.dispatch('hotRecommend/getDjTopList', this.$route.params.id)
    this.$store.dispatch('playList/GetPlayList', {
      limit: 5,
      order: 'hot'
    })
  },
  computed: {
    ...mapState('playList', ['playList']),
    ...mapState('hotRecommend', ['HotPlaylist'])
  },
  created() {
    this.commentId = this.$route.params.id

  }


}
</script>

<style scoped lang="less">
.box {
  margin: 0 auto;
}

.main-re {
  width: 982px;
  margin: 0 auto;
  height: 100%;
  overflow: hidden;
  border: 1px solid #D3D3D3;

  .main-left {
    width: 710px;
    float: left;
    border-right: 1px solid #D3D3D3;
  }
}

.main-right {
  width: 270px;
  height: 800px;
  float: right;

  .g-wrap7 {
    padding: 20px 40px 40px 30px;

    .u-hd3 {
      height: 23px;
      margin-bottom: 20px;
      border-bottom: 1px solid #ccc;
    }

    .m-piclist {
      height: auto;
      overflow: hidden;
      margin-left: -13px;
      padding-bottom: 25px;

      li {
        width: 53px;
        height: 53px;
        display: inline;
        float: left;
        padding: 0 0 13px 13px;

        a {
          display: inline-block;
          width: 40px;
          height: 40px;

          img {
            width: 40px;
            height: 40px;
          }
        }
      }
    }

    .u-hd4 {
      height: 23px;
      margin-bottom: 20px;
      border-bottom: 1px solid #ccc;
    }

    .m-rctlist {
      overflow: hidden;
      height: auto;

      li {
        float: left;
        width: 200px;
        height: 50px;
        margin-bottom: 15px;
        line-height: 24px;

        .cver {
          float: left;
          width: 50px;
          height: 50px;
          position: relative;

          img {
            width: 50px;
            height: 50px;
          }

          .cver-a {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 0;
            left: 0;
            display: inline-block;
          }
        }

        .info {
          float: left;
          margin-left: 10px;
          line-height: 24px;
          width: 140px;

          .cver-title {
            max-width: 100%;

            a {
              font-size: 14px;
              color: #000;
              max-width: 100%;
              display: inline-block;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }

          .cver-name {
            margin-top: -7px;
            display: flex;
            align-items: center;
            max-width: 100%;

            .cver-name-a {
              color: #666;
              max-width: 100%;
              margin: 0 7px;
              display: inline-block;
            }

            img {
              width: 13px;
              height: 13px;

            }
          }
        }
      }
    }

    .u-hd5 {
      height: 23px;
      margin-top: 30px;
      margin-bottom: 20px;
      border-bottom: 1px solid #ccc;
    }

    .m-multi {
      height: 65px;
      margin-bottom: 10px;
      background-position: 0 -392px;
      background-image: url("../../assets/sprite.png");

      li {
        float: left;

        &:nth-child(1) {
          a {
            display: block;
            width: 42px;
            height: 48px;
            text-indent: -9999px;
          }
        }

        &:nth-child(2) {
          width: 60px;
          height: 48px;
          margin: 0 26px 0 30px;

          a {
            display: inline-block;
            text-indent: -9999px;
            width: 60px;
            height: 48px;
          }
        }

        &:nth-child(3) {
          a {
            display: block;
            width: 42px;
            height: 48px;
            text-indent: -9999px;
          }
        }
      }
    }

    .mu-p {
      color: #999;
    }
  }
}

.songList {
  width: 670px;
  padding-top: 25px;

  min-height: 400px;
  margin: 0 auto;

  .tlt {
    width: 640px;
    height: 35px;
    margin: 0 auto;
    border-bottom: 2px solid #c20c0c;

    .out-list {
      width: 100px;
      height: 16px;
      float: left;
      display: flex;
      align-items: center;
      margin: 9px 0 0 265px;

      .u-icn {
        width: 16px;
        height: 16px;
        display: inline-block;
        background-image: url("../../assets/icon.png");
        background-position: -34px -863px;
      }

      a {
        color: #4996d1;
        text-decoration: underline;
      }
    }

    h3 {
      font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
      font-size: 20px;
      line-height: 28px;
      font-weight: normal;
      color: #333;
      float: left;
    }

    .sub {
      margin: 9px 0 0 20px;
      float: left;
      color: #666;
      font-size: 12px;
      font-family: Arial, Helvetica, sans-serif;
      -webkit-text-size-adjust: none;
    }

    .more {
      margin-top: 9px;
      height: 16px;
      float: right;

      .fc {
        color: #c20c0c;
        font-weight: bold;
      }
    }
  }

  .m-table {
    width: 640px;
    margin: 0 auto;
    border-bottom: 1px solid #D9D9D9;
    border-left: 1px solid #D9D9D9;
    border-right: 1px solid #D9D9D9;

    tr {
      width: 100%;
      vertical-align: inherit;
      font-weight: bold;
      text-align: -internal-center;

      th {
        text-align: left;
        height: 38px;
        background-color: #f7f7f7;
        background-position: 0 0;
        background-repeat: repeat-x;
        border-right: 1px solid #DEDEDE;

        div {
          height: 18px;
          line-height: 18px;
          padding: 8px 10px;
          color: #666;
          font-weight: normal;
          background-position: 0 -56px;
        }
      }
    }

    tbody {
      tr:nth-child(odd){
        background-color: #F7F7F7;
      }
      tr {
        height: 30px;

        &:hover .oper {
          display: block !important;
        }

        &:hover .u-dur {
          display: none;
        }

        td {
          height: 30px;
        }

        .filst {
          .hd {
            height: 18px;


            .num-hd {
              color: #666;
              width: 25px;
              height: 18px;
              display: inline-block;
              font-weight: normal;
              float: left;
              line-height: 18px;
              margin-left: 15px;
              margin-right: 10px;
            }

            .bg-img {
              float: left;
              display: inline-block;
              width: 17px;
              height: 17px;
              background: url("../../assets/table.png") no-repeat 0 -103px;
              &:hover{
                background-position: -0px -128px;
                cursor: pointer;
              }
            }
          }
        }

        .rank {
          padding-top: 10px;
          padding-bottom: 10px;

          .f-cb {

            display: flex;
            align-content: center;
            .mv {
              width: 23px;
              height: 17px;
              margin: 1px 0 0 2px;
              background-position: 0 -151px;
              float: left;
              background-image: url("../../assets/table.png");
              overflow: hidden;
              text-indent: -999px;
              cursor: pointer;
            }

            a {
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              color: #666;
              font-weight: normal;
            }

            .texe {
              margin-left: 10px;
              display: flex;
              align-items: center;
              justify-content: center;

              .icon-img {
                display: inline-block;
                width: 17px;
                height: 17px;
                background: url("../../assets/table.png") no-repeat -20px -128px;
              }

              .txt {
                a {
                  color: #333;
                  font-weight: normal;
                }
              }
            }

            a {
              margin-left: 10px;

              .img-data {
                width: 50px;
                height: 50px;
              }
            }

          }
        }

        .s-fc3 {
          .oper {
            display: none;
            float: left;

            a {
              width: 13px;
              height: 13px;
              float: left;
              margin-top: 2px;
              display: inline-block;

              background: url("../../assets/icon.png") no-repeat 0 -700px;
              &:hover{
                background-position: -22px -700px;
              }
            }

            .s-bg-11 {
              float: left;
              width: 18px;
              height: 16px;
              margin: 2px 0 0 4px;
              overflow: hidden;
              text-indent: -999px;
              cursor: pointer;
              background: url("../../assets/table.png") no-repeat 0 -174px;
              &:hover{
                background-position: -20px -174px;
              }
            }

            .u-icn-81 {
              float: left;
              width: 18px;
              height: 16px;
              margin: 2px 0 0 4px;
              overflow: hidden;
              text-indent: -999px;
              cursor: pointer;
              background: url("../../assets/table.png") no-repeat 0 -195px;
              &:hover{
                background-position: -20px -195px;
              }
            }

            .s-bg-12 {
              float: left;
              width: 18px;
              height: 16px;
              margin: 2px 0 0 4px;
              overflow: hidden;
              text-indent: -999px;
              cursor: pointer;
              background: url("../../assets/table.png") no-repeat -81px -174px;
              &:hover{
                background-position: -104px -174px;
              }
            }
          }

          .u-dur {
            color: #666;
            margin-left: 5px;
            font-weight: normal;
          }
        }

        .singer {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;

          .text {
            a {
              color: #666;
              margin-left: 5px;
              font-weight: normal;
            }
          }

          .album {

            margin-left: 5px;

            a {
              color: #666;
              font-weight: normal;

            }
          }
        }
      }
    }
  }
}
</style>